<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Format Currency Sample - Format as you type</title>
	<style type="text/css">
		body, div  { margin:0px auto; padding:0px; }

		.main { margin:40px; }
		
		.instructions { font-style:italic; }
		
		.sample { float:left; margin:10px; padding:4px; border:1px solid #888; width:380px; min-height:100px; }
		
		.sample h3 { margin:-4px; margin-bottom:10px; padding:4px; background:#555; color:#eee; }
		
		.sample div { clear:both; }
		.sample input { float:left; margin:0px auto; }
		
		.message { color:#f00; font-size:.8em; }
		
		.log { width:790px; clear:both; }
			
		.log h3 { background:#966; }
		#clearLog { float:right; }
	</style>
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.formatCurrency.min.js"></script>
	<script type="text/javascript">
		$(function() {
			// jQuery formatCurrency plugin: http://plugins.jquery.com/project/formatCurrency

			// Format while typing & warn on decimals entered, 2 decimal places
			$('#formatWhileTypingAndWarnOnDecimalsEntered2').blur(function() {
				$('#formatWhileTypingAndWarnOnDecimalsEnteredNotification2').html(null);
				$(this).formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: 2 });
			})
			.keyup(function(e) {
				var e = window.event || e;
				var keyUnicode = e.charCode || e.keyCode;
				if (e !== undefined) {
					switch (keyUnicode) {
						case 16: break; // Shift
						case 17: break; // Ctrl
						case 18: break; // Alt
						case 27: this.value = ''; break; // Esc: clear entry
						case 35: break; // End
						case 36: break; // Home
						case 37: break; // cursor left
						case 38: break; // cursor up
						case 39: break; // cursor right
						case 40: break; // cursor down
						case 78: break; // N (Opera 9.63+ maps the "." from the number key section to the "N" key too!) (See: http://unixpapa.com/js/key.html search for ". Del")
						case 110: break; // . number block (Opera 9.63+ maps the "." from the number block to the "N" key (78) !!!)
						case 190: break; // .
						default: $(this).formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: -1, eventOnDecimalsEntered: true });
					}
				}
			})
			.bind('decimalsEntered', function(e, cents) {
				if (String(cents).length > 2) {
					var errorMsg = 'Please do not enter any cents (0.' + cents + ')';
					$('#formatWhileTypingAndWarnOnDecimalsEnteredNotification2').html(errorMsg);
					log('Event on decimals entered: ' + errorMsg);
				}
			});


			// Warn on decimals entered, 2 decimal places
			$('#warnOnDecimalsEntered2').blur(function() {
				$('#warnOnDecimalsEnteredNotification2').html(null);
				$(this).formatCurrency({ roundToDecimalPlace: 2, eventOnDecimalsEntered: true });
			})
			.bind('decimalsEntered', function(e, cents) {
				var errorMsg = 'Please do not enter any cents (0.' + cents + ')';
				$('#warnOnDecimalsEnteredNotification2').html(errorMsg);
				log('Event on decimals entered: ' + errorMsg);
			});


			// Format while typing & warn on decimals entered, no cents
			$('#formatWhileTypingAndWarnOnDecimalsEntered').blur(function() {
				$('#formatWhileTypingAndWarnOnDecimalsEnteredNotification').html(null);
				$(this).formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: 0 });
			})
			.keyup(function(e) {
				var e = window.event || e;
				var keyUnicode = e.charCode || e.keyCode;
				if (e !== undefined) {
					switch (keyUnicode) {
						case 16: break; // Shift
						case 27: this.value = ''; break; // Esc: clear entry
						case 35: break; // End
						case 36: break; // Home
						case 37: break; // cursor left
						case 38: break; // cursor up
						case 39: break; // cursor right
						case 40: break; // cursor down
						case 78: break; // N (Opera 9.63+ maps the "." from the number key section to the "N" key too!) (See: http://unixpapa.com/js/key.html search for ". Del")
						case 110: break; // . number block (Opera 9.63+ maps the "." from the number block to the "N" key (78) !!!)
						case 190: break; // .
						default: $(this).formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: -1, eventOnDecimalsEntered: true });
					}
				}
			})
			.bind('decimalsEntered', function(e, cents) {
				var errorMsg = 'Please do not enter any cents (0.' + cents + ')';
				$('#formatWhileTypingAndWarnOnDecimalsEnteredNotification').html(errorMsg);
				log('Event on decimals entered: ' + errorMsg);
			});


			// Warn on decimals entered, no cents
			$('#warnOnDecimalsEntered').blur(function() {
				$('#warnOnDecimalsEnteredNotification').html(null);
				$(this).formatCurrency({ roundToDecimalPlace: 0, eventOnDecimalsEntered: true });
			})
			.bind('decimalsEntered', function(e, cents) {
				var errorMsg = 'Please do not enter any cents (0.' + cents + ')';
				$('#warnOnDecimalsEnteredNotification').html(errorMsg);
				log('Event on decimals entered: ' + errorMsg);
			});


			function log(text) {
				$('#divLog').prepend('<div>' + text + '</div>');
			}
			
			$('#clearLog').click(function() {
				$('#divLog').empty();
			});

		});
	</script>

</head>
<body>
	<div class="main">
		<h1>Format Currency Sample - <span style="font-size:.7em">Format as you type</span></h1>
		<p class="instructions">
			Type "123456.789" into the fields below to see the formatting
		</p>
		
		<div class="sample">
			<h3>Round to 2 decimal places</h3>
			
			<div>Format while typing & warn on decimals entered</div>
			<input type="text" id="formatWhileTypingAndWarnOnDecimalsEntered2" />
			<span id="formatWhileTypingAndWarnOnDecimalsEnteredNotification2" class="message"></span>
			
			<div>Warn on decimals entered</div>
			<input type="text" id="warnOnDecimalsEntered2" />
			<span id="warnOnDecimalsEnteredNotification2" class="message"></span>
		</div>
		
		<div class="sample">
			<h3>No Decimals</h3>
			
			<div>Format while typing & warn on decimals entered</div>
			<input type="text" id="formatWhileTypingAndWarnOnDecimalsEntered" />
			<span id="formatWhileTypingAndWarnOnDecimalsEnteredNotification" class="message"></span>
		
			<div>Warn on decimals entered</div>
			<input type="text" id="warnOnDecimalsEntered" />
			<span id="warnOnDecimalsEnteredNotification" class="message"></span>
		</div>
		
		<div class="sample log">
			<input type="button" id="clearLog" value="clear" />
			<h3>Log</h3>
			<br />
			<div id="divLog"></div>
		</div>
		
	</div>
</body>
</html>
